import React, {Component} from 'react';
import {Image} from 'react-native';
import Icon from '../../../../components/Icon';
import {isIos} from '../../../../utils/utils';
import {connect} from 'react-redux';
import {themeColor} from '../../../../config/config';

const icons = {
	'group': <Icon type='group' fill='#8c8c8c' height={20} width={20} />,
	'group-fill': <Icon type='group-fill' fill={themeColor()} height={20} width={20} />,
	'work': <Icon type='work' fill='#8c8c8c' height={20} width={20} />,
	'work-fill': <Icon type='work-fill' fill={themeColor()} height={20} width={20} />,
	'me': <Icon type='me' fill='#8c8c8c' height={20} width={20} />,
	'me-fill': <Icon type='me-fill' fill={themeColor()} height={20} width={20} />,
}

@connect(state => ({state: {...state.home}}))
class TabIcon extends Component {
	
	render() {
		let fill = '#8c8c8c';
		let type = this.props.type;
		if(this.props.state.tab == type) {
			fill = themeColor();
			type += '-fill';
		}
		let style;
		if(isIos()) {
			style = {position: 'absolute', top: 8};
		}
		return (
			<Icon 
			type={type} 
			fill={fill} 
			style={style} 
			height={20} 
			width={20} />
		);
	}
	
	shouldComponentUpdate({state}) {
		if(this.props.state.tab != state.tab && (this.props.state.tab == this.props.type || state.tab == this.props.type)) {
			return true;
		}
		return false;
	}
	
}

export default TabIcon;
